<template>
	<view class="dx-block-list">
		<draggable class="" v-model="list" item-key="index">
			<template #item="{ element, index }">
				<view class="flex justify-between" :class="{ 'mt-15px': index > 0 }">
					<el-row :gutter="15" class="flex-grow ml-10px left">
						<el-col :span="12">
							<el-input clearable placeholder="请输入标题" v-model="element.label"></el-input>
						</el-col>
						<el-col :span="12">
							<el-input clearable placeholder="请输入内容" v-model="element.value"></el-input>
						</el-col>
					</el-row>
					<view class="right flex justify-center items-center">
						<el-button size="small" type="danger" @click="del(index)">
							<dx-icon name="delete" color="#ffffff" size="16"></dx-icon>
						</el-button>
						<el-button type="primary" size="small">
							<dx-icon name="direction-adjustment-three" color="#ffffff" size="16"></dx-icon>
						</el-button>
					</view>
				</view>
			</template>
			<template #footer>
				<view class="flex justify-end pr-15px" :class="{ 'mt-10px': list.length > 0 }">
					<el-button type="primary" class="block-plus-btn" size="small" @click="add">
						<dx-icon name="plus" color="#ffffff" size="18"></dx-icon>
						<text class="ml-2px">添加</text>
					</el-button>
				</view>
			</template>
		</draggable>
	</view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import draggable from 'vuedraggable';
const props = defineProps<{
	modelValue: any;
}>();
const list = ref([
	{
		label: '',
		value: '',
	},
]);
const isUpdate = ref(true);
// 绑定关系
const $emit = defineEmits(['update:modelValue']);
watch(
	() => props.modelValue,
	(val) => {
		if (isUpdate.value && val) {
			list.value = val;
		}
	},
	{ deep: true, immediate: true }
);
watch(
	() => list.value,
	(val) => {
		isUpdate.value = false;
		$emit('update:modelValue', val);
		isUpdate.value = true;
	},
	{ deep: true }
);
function add() {
	list.value.push({
		label: '',
		value: '',
	});
}
function del(index: number) {
	list.value.splice(index, 1);
}
</script>
<style lang="scss" scoped>
.dx-block-list {
	width: 100%;
	.left {
		width: calc(100% - 110px);
	}
	.right {
		width: 110px;
	}
	&::v-deep {
		.block-plus-btn {
			&.el-button--small {
				height: 28px;
			}
		}
		.el-button + .el-button {
			margin-left: 6px;
		}
	}
}
</style>
